<template>
  <div class="app-container">
    <div class="left">
      <ExamTitle
        :nub='nub'
        :list="randlist"
        :addNub="addNub"
        :remNub="remNub"
        :isExam="false"
      />
    </div>

    <div class="right">
      <!-- 题号 -->
      <ExamNub
        :randlist="randlist"
        :nubClick="nubClick"
        :nub="nub"
        :isExam="false"
      />

      <!-- 进度条 -->
      <ExamJdt
        :time="time"
        :percentage="percentage"
      />
    </div>

    <!-- 提示框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      modal-append-to-body
      :append-to-body="true"
    >
      <div>
        <div>{{ hint }}</div>
        <div>用时：{{ endTime }}</div>
        <div>分数：{{ fenshu }}</div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="isClose"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ExamTitle from "@/components/Exam/ExamTitle.vue";
import ExamNub from "@/components/Exam/ExamNub.vue";
import ExamJdt from "@/components/Exam/ExamJdt.vue";
import { mapActions, mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      nub: 0,
      time: "50:00",
      timer: null,
      dialogVisible: false,
      endTime: "",
      timeAll: 3000,
      ansList: [],
      percentage: 0,
      fenshu: 0,
      timeFiv: 0,
      hint: "恭喜完成考试！",
    };
  },
  async created() {
    await this.getTopic();
  },
  mounted() {
    this.timerRun();
  },
  methods: {
    ...mapActions("exam", ["getTopic"]),
    ...mapMutations("exam", ["ADD_NUB"]),

    nubClick(index) {
      let num = this.nub;
      this.nub = index;
      this.isThisNub(num);
    },

    // 上下一题
    addNub() {
      if (this.nub == 49) {
        this.$confirm(
          "请再次确认是否提交试卷？提交后将无法继续作答！",
          "提示",
          {
            confirmButtonText: "确认提交",
            cancelButtonText: "继续作答",
            type: "warning",
          }
        )
          .then(() => {
            this.timeEnd("恭喜完成考试！");
          })
          .catch(() => {
            this.nub = 49;
            this.$message({
              type: "info",
              message: "继续答题！",
            });
          });
      } else {
        this.nub += 1;
        this.isThisNub(this.nub - 1);
      }
    },
    remNub() {
      this.nub -= 1;
      this.isThisNub(this.nub + 1);
    },
    isClose() {
      this.dialogVisible = false;
      // this.timeAll = 3000;
      // this.timer = null;
      // this.nub = 0;
      // this.getTopic();
      this.$router.go(0);
    },
    timeEnd(text) {
      let num = 3000 - this.timeAll,
        d = parseInt(num / 60),
        s = parseInt(num % 60),
        fens = this.randlist.filter((v) => {
          return v.isBool == true;
        }).length;
      this.hint = text;
      this.endTime = this.getZero(d) + ":" + this.getZero(s);
      this.fenshu = fens * 2;
      this.dialogVisible = true;
    },
    isThisNub(nub) {
      let arr = JSON.parse(this.randlist[nub].answers),
        ary = this.randlist[nub].usersAnswers;
      if (ary.length == 0) {
        this.randlist[nub].isBool = false;
      } else if (arr.length == ary.length) {
        for (let i = 0; i < ary.length; i++) {
          if (arr.indexOf(ary[i]) == -1) {
            this.randlist[nub].isBool = false;
            break;
          } else {
            this.randlist[nub].isBool = true;
          }
        }
      } else {
        this.randlist[nub].isBool = false;
      }
    },

    // 倒计时
    timerRun() {
      this.timer = setInterval(() => {
        this.timeAll--;
        this.percentage = (1 - this.timeAll / 3000) * 100;
        let d = parseInt(this.timeAll / 60);
        let s = parseInt(this.timeAll % 60);
        setInterval(() => {
          this.timeFiv += 500;
        }, 500);
        console.log(this.timeFiv);
        if ((this.timeFiv / 500) % 2 == 0) {
          this.time = this.getZero(d) + ":" + this.getZero(s);
        } else {
          this.time = this.getZero(d) + " " + this.getZero(s);
        }

        if (this.timeAll == 0) {
          clearInterval(this.timer);
          this.timeEnd("时间到！");
          this.endTime = "50:00";
        }
      }, 1000);
    },
    getZero(a) {
      return a < 10 ? "0" + a : a;
    },
  },
  computed: {
    ...mapState("exam", ["randlist"]),
  },
  components: {
    ExamTitle,
    ExamNub,
    ExamJdt,
  },
};
</script>

<style scoped>
/* color -参考 */
.bgColor {
  background-color: rgb(0, 183, 255, 0.7);
  background-color: red;
  background-color: rgba(12, 253, 4, 0.822);
  background-color: #cccccc;
}
/* ------- */

.app-container {
  display: flex;
  justify-content: space-between;
}

.app-container > div {
  width: 50%;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 26px;
}
</style>
